<template>
<div>
    <v-card class="overflow-hidden">
    <v-app-bar
        color="#6A76AB"
        dark
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
        ></v-img>
      </template>
      <!--<v-app-bar-nav-icon></v-app-bar-nav-icon>-->
      <v-toolbar-title>订单</v-toolbar-title>

      <div class="flex-grow-1"></div>

      <v-btn icon @click="back">
        <v-icon>keyboard_backspace</v-icon>
      </v-btn>
    
      <template v-slot:extension>
        <v-tabs background-color="transparent">
            <v-tab @click="setordershow(1)" style="margin-left:0">所有订单</v-tab>
            <v-tab @click="setordershow(2)" style="margin-left:0">待支付</v-tab>
            <v-tab @click="setordershow(3)" style="margin-left:0">已支付</v-tab>
         </v-tabs>
      </template>
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-4"
      class="overflow-y-auto"
      max-height="100%"
    >
    <v-container>
        <!-- 所有订单 -->
        <div v-if="ordershow == 1">
            <v-row>
            <v-col>
            <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in allorders" :key="i"
            >
                <v-list-item three-line>
                <v-list-item-content>
                    <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                    <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                    <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-avatar
                    tile
                    size="80"
                    color="grey"
                ></v-list-item-avatar>
                </v-list-item>
                <v-card-actions>
                    <v-btn text color="error" @click="orderDo(allorder.order_no,allorder.status,allorder.write_off,allorder.call_using_url,allorder.call_used_url)">{{ allorder.status == 1 ? "待支付" : allorder.status == 2 ? allorder.write_off ?  allorder.call_used : allorder.call_using : "已取消" }} </v-btn>
                    <v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    <!--
                    <v-btn text color="rgba(0,0,0,0.1)" @click="deleteorder(allorder.order_no)" >删除</v-btn>-->
                </v-card-actions>
            </v-card>
            </v-col>
            </v-row>
        </div>
         <!-- 待支付 -->
        <div v-if="ordershow == 2">
            <v-row>
                <v-col>
                <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in nopayorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-list-item-avatar
                    tile
                    size="80"
                    color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    <v-card-actions>
                        <v-btn text color="error" @click="orderDo(allorder.order_no,allorder.status,allorder.write_off,allorder.call_using_url,allorder.call_used_url)">{{ allorder.status == 1 ? "待支付" : allorder.status == 2 ? allorder.write_off ?  allorder.call_used : allorder.call_using : "已取消" }} </v-btn>
                        <v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
        </div>
        <!-- 已支付 -->
        <div v-if="ordershow == 3">
            <v-row>
                <v-col>
                <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in okorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>

                    <v-list-item-avatar
                        tile
                        size="80"
                        color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    <v-card-actions>
                        <v-btn text color="error" @click="orderDo(allorder.order_no,allorder.status,allorder.write_off,allorder.call_using_url,allorder.call_used_url)">{{ allorder.status == 1 ? "待支付" : allorder.status == 2 ? allorder.write_off ?  allorder.call_used : allorder.call_using : "已取消" }} </v-btn>
                        <v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
        </div>

        <!-- 已支付 -->
        <!--
        <v-tab-item>
            <v-container fluid>
            <v-row>
                <v-col>
                <v-card
                :v-if="ordershow == 4"
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in okorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>

                    <v-list-item-avatar
                        tile
                        size="80"
                        color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    
                    <v-card-actions>
                        <v-btn text color="error" @click="tocall(allorder.call_url,allorder.order_no)">{{ allorder.call_name }}</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
            </v-container>
        </v-tab-item>
        -->
        </v-container>
    </v-sheet>
   
  </v-card>
  <v-card style="box-shadow: 0 0 0 rgba(0,0,0,0);">
      <div class="text-center" style="box-shadow: 0 0 0 rgba(0,0,0,0);">
            <v-dialog
            v-model="loding"
            :persistent="true"
            width="300"
            >
            <v-card
                color="primary"
                dark
                style="box-shadow: 0 0 0 rgba(0,0,0,0);"
            >
                <v-card-text>
                请稍侯...
                <v-progress-linear
                    indeterminate
                    color="white"
                    class="mb-0"
                ></v-progress-linear>
                </v-card-text>
            </v-card>
            </v-dialog>
        </div>
    <div class="text-center">
            <v-dialog
            v-model="payloding"
            :persistent="true"
            width="300"
            >
            <v-card
                color="primary"
                dark
            >
                <v-card-text>
                请稍侯...
                <v-progress-linear
                    indeterminate
                    color="white"
                    class="mb-0"
                ></v-progress-linear>
                </v-card-text>
            </v-card>
            </v-dialog>
        </div>
  </v-card>
</div>
</template>
<script>

import {domain, allorder, okorder, nopayorder, deleteorder,wxpayjsapi,orderstatus,revokeorder,URLP } from './../../api/api'

export default {
    data: ()=>({
        vsheetHeight:0,
        ordershow:1,
        allorders: [],
        nopayorders: [],
        okorders: [],
        loding:true,
        payloding:false,
        getorder:function(){
            nopayorder(this.$cookies.get("authtoken"))
            .then((resp)=>{
                    var res = resp.data
                    if(res.code==1){
                        // 成功下单进入下一步
                        this.nopayorders = res.data
                    }else{
                        if(res.result.errcode=2001){
                            this.$router.push({path:'/login'})
                        }
                        console.log("失败")
                    }
            })
            allorder(this.$cookies.get("authtoken"))
            .then((resp)=>{
                    var res = resp.data
                    if(res.code==1){
                        // 成功下单进入下一步
                        this.allorders = res.data

                    }else{
                        console.log("失败")
                    }
            })
            okorder(this.$cookies.get("authtoken"))
            .then((resp)=>{
                this.$store.commit('setProgress',false)
                    var res = resp.data
                    this.loding = false
                    if(res.code==1){
                        // 成功下单进入下一步
                        this.okorders = res.data
                    }else{
                        console.log("失败")
                    }
            })
        }
    }),
    methods: {
        orderDo:function(order_no,status,write_off,call_using_url,call_used_url){ // 订单按钮动作
            if(status == 1){ // 待支付
                window.location.href = "https://iuu.pub/pay/wechat?order_no="+order_no+"&calluri="+call_using_url
            }
            if(status == 2){ // 已支付
                if(write_off){
                    this.$router.push(call_used_url+"?order_no="+order_no)
                }else{
                    this.$router.push(call_using_url+"?order_no="+order_no)
                }
            }
            if(status == 3){ // 已取消
                alert("订单已被取消")
            }
        },
        setordershow:function(i){
            this.ordershow = i
        },
        tocall:function(call_url, order_no){
            window.location.href = domain + call_url+"?order_no="+order_no+"&hl="+URLP("hl")
        },
        payOrder: function(order_no){
            // this.$cookies.set("order_no",order_no)
            
        },
        deleteorder: function(order_no){
            this.loding = true
            deleteorder(order_no,this.$cookies.get("authtoken"))// revokeorder
            .then((resp)=>{
            var res = resp.data
            console.log(res)
            this.getorder()
                if(res.code==1){                
                    this.loding = false
                }else{
                    this.loding = false
                    if(res.result.errcode=2001){
                        this.$router.push({path:'/login'})
                    }
                    alert("发生错误")
                }
            })
        },
        revokeorder: function(order_no){
            this.loding = true
            revokeorder(order_no,this.$cookies.get("authtoken"))// revokeorder
            .then((resp)=>{
                var res = resp.data
                console.log(res)
                if(res.code==1){                
                    this.loding = false
                    this.getorder()
                }else{
                    this.loding = false
                    if(res.result.errcode=2001){
                        this.$router.push({path:'/login'})
                    }
                    alert("发生错误")
                }
            })
        },
        back:function(e){
            this.$router.go(-1)
        },
    },
    created: function(){
        
        this.getorder()
    },
}
</script>

<style scoped>
.mtop {
    margin-top: 1rem;
}
.font10px {
    font-size: 10px;
}
</style>